<template>
  <div class="view-tabs">
    <fx-card title="基础用法">
      <fx-tabs v-model="base">
        <fx-tabs-item v-for="(item) in tabsList" :key="item.value" :name="item.value" :title="item.value">
          <div style="padding: 10px 0;">
            <p>{{ item.role }}</p>
            <p>{{ item.introduction }}</p>
          </div>
        </fx-tabs-item>
      </fx-tabs>
      <template #hide>
        <pre v-highlight="baseCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="卡片">
      <fx-tabs v-model="card" :type="tabType">
        <fx-tabs-item v-for="(item) in tabsList" :key="item.value" :name="item.value" :title="item.value">
          <div style="padding: 10px;">
            <p>{{ item.role }}</p>
            <p>{{ item.introduction }}</p>
          </div>
        </fx-tabs-item>
      </fx-tabs>
      <fx-radio-group class="mt10" v-model="tabType">
        <fx-radio-button label="card">card</fx-radio-button>
        <fx-radio-button label="border-card">border-card</fx-radio-button>
      </fx-radio-group>
      <template #hide>
        <pre v-highlight="tabCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="添加/删除">
      <fx-tabs v-model="addClose" :type="addCloseTabType" addable @tab-close="tabClose" @tab-add="tabAdd">
        <fx-tabs-item v-for="(item) in closeList" :key="item.value"
                      :name="item.value" :title="item.value" :closable="item.closable">
          <div style="padding: 10px;">
            <p>{{ item.role }}</p>
            <p>{{ item.introduction }}</p>
          </div>
        </fx-tabs-item>
      </fx-tabs>
      <fx-radio-group class="mt10" v-model="addCloseTabType">
        <fx-radio-button label="line">line</fx-radio-button>
        <fx-radio-button label="card">card</fx-radio-button>
        <fx-radio-button label="border-card">border-card</fx-radio-button>
      </fx-radio-group>
      <template #hide>
        <pre v-highlight="addCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="标签宽度限制">
      <fx-tabs v-model="width" type="card" max-width="60">
        <fx-tabs-item v-for="(item) in tabsList" :key="item.value" :name="item.value" :title="item.value">
          <div style="padding: 10px;">
            <p>{{ item.role }}</p>
            <p>{{ item.introduction }}</p>
          </div>
        </fx-tabs-item>
      </fx-tabs>
      <template #hide>
        <pre v-highlight="widthCode"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { defaultList, IDefaultListProps } from '@/assets/menuList'
import { randomId } from '@/base/utils'

export default defineComponent({
  name: 'tabs',
  setup () {
    const base = ref('蒙奇·D·路飞')
    const card = ref('罗罗诺亚·索隆')
    const tabType = ref('card')
    const addClose = ref('罗罗诺亚·索隆')
    const addCloseTabType = ref('card')
    const width = ref('蒙奇·D·路飞')
    const tabsList: IDefaultListProps[] = JSON.parse(JSON.stringify(defaultList))
    const closeList = ref<IDefaultListProps[]>(JSON.parse(JSON.stringify(defaultList)))

    const tabClose = (name: string) => {
      closeList.value = closeList.value.filter((item: IDefaultListProps) => item.value !== name)
      if (addClose.value === name && closeList.value.length) addClose.value = closeList.value[closeList.value.length - 1].value
    }

    const tabAdd = () => {
      const id = randomId(3)
      closeList.value.push({
        value: `新增${id}`,
        role: `新增${id}`,
        label: `新增${id}`,
        introduction: `新增介绍内容${id}`,
        closable: Math.random() > 0.5
      })
    }

    const baseCode = `<fx-tabs v-model="base">
  <fx-tabs-item v-for="(item) in tabsList" :key="item.value" :name="item.value" :title="item.value">
    <div style="padding: 10px 0;">
      <p>{{ item.role }}</p>
      <p>{{ item.introduction }}</p>
    </div>
  </fx-tabs-item>
</fx-tabs>`
    const tabCode = `<fx-tabs v-model="card" :type="tabType">
  <fx-tabs-item v-for="(item) in tabsList" :key="item.value" :name="item.value" :title="item.value">
    <div style="padding: 10px;">
      <p>{{ item.role }}</p>
      <p>{{ item.introduction }}</p>
    </div>
  </fx-tabs-item>
</fx-tabs>
<fx-radio-group class="mt10" v-model="tabType">
  <fx-radio-button label="card">card</fx-radio-button>
  <fx-radio-button label="border-card">border-card</fx-radio-button>
</fx-radio-group>`
    const addCode = `<fx-tabs v-model="addClose" :type="addCloseTabType" addable @tab-close="tabClose" @tab-add="tabAdd">
  <fx-tabs-item v-for="(item) in closeList" :key="item.value" :name="item.value" :title="item.value" :closable="item.closable">
    <div style="padding: 10px;">
      <p>{{ item.role }}</p>
      <p>{{ item.introduction }}</p>
    </div>
  </fx-tabs-item>
</fx-tabs>
<fx-radio-group class="mt10" v-model="addCloseTabType">
  <fx-radio-button label="line">line</fx-radio-button>
  <fx-radio-button label="card">card</fx-radio-button>
  <fx-radio-button label="border-card">border-card</fx-radio-button>
</fx-radio-group>

export default defineComponent({
    setup() {
      const addClose = ref('罗罗诺亚·索隆')
      const addCloseTabType = ref('card')
      const closeList = ref<IDefaultListProps[]>(defaultList)
      const tabClose = (name: string) => {
        closeList.value = closeList.value.filter((item: IDefaultListProps) => item.value !== name)
        if (addClose.value === name && closeList.value.length) addClose.value = closeList.value[closeList.value.length - 1].value
      }

      const tabAdd = () => {
        const id = randomId(3)
        closeList.value.push({
          value: '新增' + id,
          role: '新增' + id,
          label: '新增' + id,
          introduction: '新增介绍内容' + id,
          closable: Math.random() > 0.5
        })
      }
    }
})`
    const widthCode = `<fx-tabs v-model="width" type="card" max-width="60">
  <fx-tabs-item v-for="(item) in tabsList" :key="item.value" :name="item.value" :title="item.value">
    <div style="padding: 10px;">
      <p>{{ item.role }}</p>
      <p>{{ item.introduction }}</p>
    </div>
  </fx-tabs-item>
</fx-tabs>`

    return {
      base,
      card,
      tabType,
      addClose,
      tabsList,
      closeList,
      width,
      addCloseTabType,
      tabClose,
      tabAdd,
      baseCode,
      tabCode,
      addCode,
      widthCode
    }
  }
})
</script>

<style scoped lang="scss">
.view-tabs {
  p {
    white-space: pre-wrap;
  }
}
</style>
